﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery MiniUI - 专业WebUI控件库</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="keywords" content="jquery,web,grid,表格,datagrid,js,javascript,ajax,web开发,tree,table" />   
    <meta name="description" content="jQuery MiniUI - 专业WebUI控件库。它能缩短开发时间，减少代码量，使开发者更专注于业务和服务端，轻松实现界面开发，带来绝佳的用户体验。" />
    <link href="../core.css" rel="stylesheet" type="text/css" />
    
    <style type="text/css">

    .td1
    {
        width:180px;
        padding-bottom:32px;
        vertical-align:top;
        cursor:default;
    }
    .td1 div
    {
        width:150px;
        height:100px;
        border:solid 1px #bbb;
        background:url(images/support.gif) no-repeat 50% 50%;
        text-align:center;
        line-height:100px;
        font-size:14px;
        font-family:微软雅黑,黑体,宋体;
    }
    .td2
    {
        vertical-align:top;
        padding-top:2px;
    }
    h2
    {
        font-size:15px;
        margin:0;
    }
    p
    {
        line-height:20px;
        font-size:13px;
    }
    ul
    {
        font-size:13px;
        line-height:20px;
    }
    </style>
</head>
<body>

    <div class="header">
        <div class="headerInner">
            <a class="logo" href="http://www.miniui.com" title="jQuery MiniUI - 专业WebUI控件库">jQuery MiniUI</a>
            <a id="why" href="/why">为什么选择MiniUI？</a>

            <ul class="topmenu">
                <li><a href="/"><span>首页</span></a></li>
                <li onmouseover="showMenu('popup1', this)" onmouseout="hideMenu('popup1', this)"><a href="/product"><span>产品</span></a>
                    <ul id="popup1" class="popupmenu">
                        <li class="product"><a href="/product">产品介绍</a></li>
                        <li><a href="/features">功能特性</a></li>
                        <li><a href="/screenshots">界面截图</a></li>                        
                        <li><a href="/support">支持服务</a></li>
                        <li><a href="/license">授权方式</a></li>
                        
                        <li class="faq"><a href="/faq">常见问题</a></li>
                    </ul>
                </li>
                <li><a href="/demo"><span>示例</span></a></li>
                <li onmouseover="showMenu('popup2', this)" onmouseout="hideMenu('popup2', this)"><a href="/docs"><span>文档</span></a>
                    <ul id="popup2" class="popupmenu">                        
                        <li id="start_link"><a href="/docs/quickstart">快速入门</a></li>
                        <li><a href="/docs/tutorial">开发教程</a></li>
                        <li id="kb_link"><a href="/docs/kb">精华文章</a></li>
                        <li><a href="/docs/api">Api参考手册</a></li>
                    </ul>
                </li>
                <li><a href="/bbs"><span>论坛</span></a></li><li><a href="/download"><span>下载</span></a></li>
                
                <li><a href="/contact"><span>联系</span></a></li>
            </ul>
        
     
        </div>
    </div>
    <div class="topnav">
        <div class="topnavInner">
            <a href="/">首页</a>><a href="/docs">文档中心</a>><span>快速入门</span>
        </div>
    </div>
    <div class="body leftCenter">
        <div class="bodyInner">
            <div class="bodyLeft">
                <div class="leftmenu">
                    <h1>快速入门</h1>
                    <ul>
                        <li><a href="index.html">下载安装</a></li>
                        <li class="active"><a href="first.html">Hello, world!</a></li>
                        <li><a href="crud.html">CRUD</a></li>                        
                        <li><a href="form.html">表单开发</a></li>                        
                        <li><a href="layout.html">主框架布局</a></li>
                    </ul>
                </div>
            </div>
            <div class="bodyCenter">
                <h1 class="bodyTitle" style="font-family:Tahoma;">Hello, world!</h1>

                <div id="content">
                        <p>我们开始编写第一个MiniUI程序，代码如下：</p>
<pre class="code"><span style="color:blue">&lt;!</span><span style="color:maroon">DOCTYPE </span><span style="color:red">html </span>/<span style="color:blue">&gt;
&lt;</span><span style="color:maroon">html</span><span style="color:blue">&gt;
&lt;</span><span style="color:maroon">head</span><span style="color:blue">&gt;
    &lt;</span><span style="color:maroon">title</span><span style="color:blue">&gt;</span> Hello MiniUI!<span style="color:blue">&lt;/</span><span style="color:maroon">title</span><span style="color:blue">&gt;
    </span><span style="color:#006400">&lt;!--jQuery js--&gt;
    </span><span style="color:blue">&lt;</span><span style="color:maroon">script </span><span style="color:red">src</span><span style="color:blue">="../jquery.js" </span><span style="color:red">type</span><span style="color:blue">="text/javascript"&gt;&lt;/</span><span style="color:maroon">script</span><span style="color:blue">&gt;
    </span><span style="color:#006400">&lt;!--MiniUI--&gt;
    </span><span style="color:blue">&lt;</span><span style="color:maroon">link </span><span style="color:red">href</span><span style="color:blue">="../themes/default/miniui.css" </span><span style="color:red">rel</span><span style="color:blue">="stylesheet" </span><span style="color:red">type</span><span style="color:blue">="text/css" /&gt;        
    &lt;</span><span style="color:maroon">script </span><span style="color:red">src</span><span style="color:blue">="../miniui.js" </span><span style="color:red">type</span><span style="color:blue">="text/javascript"&gt;&lt;/</span><span style="color:maroon">script</span><span style="color:blue">&gt;
&lt;/</span><span style="color:maroon">head</span><span style="color:blue">&gt;
&lt;</span><span style="color:maroon">body</span><span style="color:blue">&gt;
    &lt;</span><span style="color:maroon">input </span><span style="color:red">id</span><span style="color:blue">="helloBtn" </span><span style="color:red">class</span><span style="color:blue">="mini-button" </span><span style="color:red">text</span><span style="color:blue">="Hello" </span><span style="color:red">onclick</span><span style="color:blue">="onHelloClick"/&gt;
    &lt;</span><span style="color:maroon">script </span><span style="color:red">type</span><span style="color:blue">="text/javascript"&gt;
        function </span>onHelloClick(e) {
            <span style="color:blue">var </span>button = e.sender;
            mini.alert(<span style="color:maroon">"Hello MiniUI!"</span>);
        }
    <span style="color:blue">&lt;/</span><span style="color:maroon">script</span><span style="color:blue">&gt;
&lt;/</span><span style="color:maroon">body</span><span style="color:blue">&gt;
&lt;/</span><span style="color:maroon">html</span><span style="color:blue">&gt;
</span></pre>

    <p><span class="note">Note：</span>请注意相关javascript和css的路径是否正确。</p>

    <p>MiniUI是基于jQuery开发的javascript控件库，所以依赖jquery.js。jQuery版本1.4+即可。</p>
        
    <p>效果图如下：</p>
    <img src="../api/images/hello.gif" />
    <br /><br />
    <p>本例注意点如下：</p>
    <ul>
        <li>控件声明：class="mini-button"</li>
        <li>属性设置：text="Hello"</li>
        <li>事件绑定：onclick="onHelloClick"</li>
        <li>事件处理函数：onHelloClick的e是事件对象，e.sender是事件激发者，本例中是button。</li>
    </ul>
    <p><a href="../../demo/hello_world.html" style="color:Blue;text-decoration:underline">运行示例</a></p>


                </div>

            </div>
            <div class="bodyRight">                
                <div class="panel">
                    <h1>文档中心</h1>
                    <div class="panelBody">
                        <a id="start_item" href="/docs/getting_started">新手入门</a>
                        <a href="/docs/tutorial">开发指南</a>
                        <a id="kb_item" href="/docs/kb">精华文章</a>
                        <a href="/docs/api">组件参考手册</a>
                    </div>
                </div>
                <div class="panel">
                    <h1>示例中心</h1>
                    <div class="panelBody">
                        <a href="/demo#app=crud">CRUD：DataGrid</a>
                        <a href="/demo#app=master-detail">Master-Detail</a>
                        <a href="/demo#app=layout">界面布局</a>
                        <a href="/demo#app=validator">数据验证</a>
                        <a href="/demo#ui=tree">树形：Tree</a>
             <!--           <a href="/api">富文本编辑器</a>
                        <a href="/api">图表</a>-->
                    </div>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div class="footer">
        <div class="footerInner">
            <div id="copyright">Copyright © 上海普加软件有限公司版权所有 </div>
            <div id="bottomlinks"><a href="/sitemap">网站导航</a>|<a href="/support">支持服务</a>|<a href="/license">授权方式</a>|<a href="/contact">联系我们</a></div>
        </div>
    </div>
</body>
</html>
